<template>
  <div class="home">
    <el-container ref="containBox" :style="{height: this.$store.state.clientHeight + 'px', overflow: 'auto'}">
      <el-header style="margin-top: 8px;margin-left: 8px">
        <comNav></comNav>
      </el-header>
      <el-container style="margin-left: 8px;">
        <el-aside width="191px" style="background: rgb(84, 92, 100);">
          <comLeft></comLeft>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
      <!--<el-footer style="height: 20px;background: rgb(241, 241, 241);">-->
        <!--<comFooter></comFooter>-->
      <!--</el-footer>-->
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
    }
  },
  mounted(){
    window.onload = window.onresize = () => {
      // this.initSideHeight()
      this.$store.commit('changeClientHeight')
      // this.$store.state.clientHeight = `${document.documentElement.clientHeight}`
    }
    console.log(1);
  },
  methods: {
    initSideHeight(){
      this.$refs.containBox.$el.style.height = document.documentElement.clientHeight + 'px'
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  watch: {
    '$route': 'initSideHeight'    // getTabelValueReset 是路由改变后触发的函数名称
  },

}
</script>
<style lang="scss" scoped>
  .el-popover{
    height: 200px;
    overflow: auto;
  }
  .home{
    width: 100%;
    height: 100%;
    background: white;
  }
</style>
